/**
 * @author:linjiye
 * @date:2025/1/9
 * @desc:
 **/

import {StyleSheet, Text, TouchableOpacity, View, Image, ScrollView, Clipboard, Modal,Alert} from 'react-native'
import React, {useCallback, useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcTextInput from "@/components/FcTextInput";
import FcButton from "@/components/FcButton";
import {LinearGradient} from "expo-linear-gradient";
import useApiOfSSE from "@/hooks/useApiOfSSE";
import {Toast} from "@ant-design/react-native";
import {formatTimestamp, isMoreThanTwoMinutes} from "@/utils";
import useSetStorage from "@/hooks/useSetStorage";
import useGetStorage from "@/hooks/useGetStorage";
import AnswersHistory from "@/components/questionsAndAnswers/AnswersHistory";
import FcModal from "@/components/FcModal";
import ImageViewer from 'react-native-image-zoom-viewer';
import {useOssAccessInfoQuery} from "@/store/api/oss/ossApi";
import * as ImagePicker from "expo-image-picker";
import { Audio } from 'expo-av';
import {set_params} from "@/store/reducer/morePlatforms/morePlatformsSlice";

type Props = {}

const index = (props: Props) => {
    const [inputText, setInputText] = useState<string>("");
    const [list, setList] = useState<any>([])
    const [source, setSource] = useState(null)
    const [isVisible, setIsVisible] = useState(false);
    const [isOpenTools, setIsOpenTools] = useState(false)
    const [imgUrl, setImgUrl] = useState('https://img2.baidu.com/it/u=2849290704,1302860471&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1085')
    const [isUrl, setIsUrl] = useState(false)
    const [inputUrl, setInputUrl] = useState('')
    const [isRequired, setIsRequired] = useState(false)
    const [imgList, setImgList] = useState([])
    const [imgIndex, setImgIndex] = useState(0)
    const [isShowImg, setIsShowImg] = useState(false)
    const [fileUrl,setFileUrl] = useState('')
    const [isVoice, setIsVoice] = useState(false)

    const [recording, setRecording] = useState<Audio.Recording | null>(null);
    const [isRecording, setIsRecording] = useState(false);
    const [recordedURI, setRecordedURI] = useState<string | null>(null);

    const {data:ossInfo,refetch:ossRefetch} = useOssAccessInfoQuery({
        fileUrl: fileUrl,
    })

    useEffect(() => {
        if (list.length <= 0) {
            addAnswers()
        }
        if(ossInfo){
            setImgUrl(ossInfo.fileUrl)
        }
    }, [ossInfo])

    function addAnswers() {
        setImgUrl('')
        setInputText('')
        setIsUrl(false)
        setIsOpenTools(false)
        let timestamp = Date.now()
        setList([
            {
                content: '生成式人工智能，告诉我更多，我会懂你!因为我更有创造力！',
                role: "ASSISTANT",
                timestamp
            }
        ])
    }

    function setAiAnswersHistory(list) {
        useGetStorage('aiAnswersHistory').then(res => {
            let obj = {
                id: list[0].timestamp,
                timestamp: list[0].timestamp,
                name: list[list.length-1].content,
                time: formatTimestamp(list[list.length-1].timestamp,1),
                list: list
            }
            if(res) {
                let newRes = res.filter(item => item.id !== list[0].timestamp)
                useSetStorage('aiAnswersHistory',[obj,...newRes])
            } else {
                let arr = [obj]
                useSetStorage('aiAnswersHistory',arr)
            }
        })
    }

    function takeSend(val) {
        let timestamp = Date.now()
        let obj = {
            content: inputText || val,
            imgUrl: imgUrl?[imgUrl]:[],
            role: "USER",
            timestamp
        }
        if(imgUrl) {
            Image.getSize(imgUrl, (width, height) => {
                obj.imgLink = imgUrl
                obj.imgWidth = width
                obj.imgHeight = height
                obj.imgRatio = width/height

                if(width>height) {
                    obj.imgWidthShow = 200
                    obj.imgHeightShow = 200 / obj.imgRatio
                } else if(width<height) {
                    obj.imgWidthShow = 200 * obj.imgRatio
                    obj.imgHeightShow = 200
                } else {
                    obj.imgWidthShow = 200
                    obj.imgHeightShow = 200
                }

                console.log('图片尺寸',width,height)
            }, (error) => {
                console.error(error);
            });
        }

        let l = [...list, obj]
        setList(l)
        takeQuery(l,l.length)
        setIsRequired(true)
    }

    function selectKeywork(val) {
        takeSend(val)
    }

    async function takeQuery(l,length) {
        setImgUrl('')
        setInputText('')
        // useApiOfSSE({
        //     url: 'mm/aicreation/chatAndAdvice',
        //     payload: l
        // }).then((resData) => {
        //     setSource(resData)
        //
        //     let timestamp = Date.now()
        //
        //     resData.addEventListener('message', (e) => {
        //         let res = JSON.parse(e.data)
        //         if (res.status == 'success') {
        //             let txt = res.text.replace(/(<br\/>)|(<br)/g, '');
        //             let advices = res.advices
        //
        //             let obj = {
        //                 content: txt,
        //                 role: "ASSISTANT",
        //                 advices,
        //                 timestamp
        //             }
        //
        //             if(l[length+1]){
        //                 l[length+1] = obj
        //                 setList(l)
        //                 if(res.stop) {
        //                     setAiAnswersHistory(l)
        //                     setIsRequired(false)
        //                 }
        //             } else {
        //                 setList([...l, obj])
        //                 if(res.stop) {
        //                     setAiAnswersHistory([...l, obj])
        //                     setIsRequired(false)
        //                 }
        //             }
        //         } else {
        //             resData.close();
        //             setIsRequired(false)
        //         }
        //     })
        // })


        await useGetStorage('token').then(async (token) => {
            try {
                const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}mm/aicreation/chatAndAdvice`,{
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json',
                        'x-access-token': token,
                    },
                    body: JSON.stringify(l)
                });
                console.log(response,'---');
                const blob = await response.blob();
                const reader = new FileReader();
                let timestamp = Date.now()
                reader.onload = (event) => {
                    const result = event.target.result;
                    // 按行分割流式数据
                    const lines = result.split('\n');
                    lines.forEach((line) => {
                        if (line) {
                            console.log(line);
                            let newLine = `${line.replace('data:','')}`;
                            // 在这里处理流式数据
                            let res = JSON.parse(newLine)
                            if (res.status == 'success') {
                                let txt = res.text.replace(/(<br\/>)|(<br)/g, '');
                                let advices = res.advices

                                let obj = {
                                    content: txt,
                                    role: "ASSISTANT",
                                    advices,
                                    timestamp
                                }

                                if(l[length+1]){
                                    l[length+1] = obj
                                    setList(l)
                                    if(res.stop) {
                                        setAiAnswersHistory(l)
                                        setIsRequired(false)
                                    }
                                } else {
                                    setList([...l, obj])
                                    if(res.stop) {
                                        setAiAnswersHistory([...l, obj])
                                        setIsRequired(false)
                                    }
                                }
                            }
                        }
                    });
                };

                reader.onerror = (error) => {
                    console.error('Error reading blob:', error);
                };

                reader.readAsText(blob);
            } catch (error) {
                console.log('Error fetching stream:', error);
            }
        })

    }

    async function handleCopyToClipboardComponent(val) {
        try {
            await Clipboard.setString(val);
            Toast.info('复制成功')
        } catch (error) {
            console.log(error)
            Toast.info('复制失败')
        }
    }

    function takeSure() {
        setImgUrl(inputUrl)
        setIsUrl(false)
    }

    function handleSelectItem(val) {
        console.log(val);
        setIsVisible(false)
        setList(val.list)
    }

    function stopSend() {
        source.close()
        setIsRequired(false)
        setTimeout(()=> {
            setAiAnswersHistory(list)
        },1000)
    }


    function showImg(val) {
        let arr = []
        list.forEach((item, index) => {
            if(item.imgLink) {
                arr.push({
                    url: item.imgLink,
                    props: {
                        // headers: ...
                    }
                })
            }
        })
        let index = arr.findIndex(item => item.url === val.imgLink)
        setImgList(arr)
        setImgIndex(index)
        setIsShowImg(true)
    }

    async function uploadFile() {
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

        if (permissionResult.granted === false) {
            alert('Permission to access gallery is required!');
            return;
        }
        let pickerResult = await ImagePicker.launchImageLibraryAsync({
            // mediaTypes: ImagePicker.MediaTypeOptions.Videos,
            // allowsMultipleSelection: true, //可以在相册中选择多个图片或视频
            mediaTypes: ImagePicker.MediaTypeOptions.All, // 选择图片或视频都可以
            allowsEditing: true, // 可选，允许用户编辑所选图片或视频。
            // aspect: [4, 3], // 可选，设置选择的图片或视频的宽高比。
            quality: 1, // 可选，设置图片或视频的质量。0到1之间。1表示最高质量。
        });
        if (!pickerResult.canceled) {
            setFileUrl(pickerResult?.assets[0]?.uri)
            ossRefetch()
        }
    }

    // 开始录音
    async function startRecording() {
        try {
            const { status } = await Audio.requestPermissionsAsync();
            if (status !== 'granted') return;

            await Audio.setAudioModeAsync({
                allowsRecordingIOS: true,
                playsInSilentModeIOS: true,
            });

            const { recording: newRecording } = await Audio.Recording.createAsync(
                Audio.RecordingOptionsPresets.HIGH_QUALITY
            );

            // 添加Android录音格式配置
            // Audio.Recording.createAsync(
            //     {
            //         android: {
            //             extension: '.m4a',
            //             outputFormat: Audio.AndroidOutputFormat.MPEG_4,
            //             audioEncoder: Audio.AndroidAudioEncoder.AAC
            //         },
            //         ios: {
            //             extension: '.wav',
            //             audioQuality: Audio.IOSAudioQuality.HIGH
            //         }
            //     }
            // );

            setRecording(newRecording);
            setIsRecording(true);
            setRecordedURI(null); // 清除之前录音
        } catch (err) {
            Alert.alert("录音启动失败");
        }
    }

    // 停止并保存录音
    async function stopRecording() {
        if (!recording) return;

        try {
            await recording.stopAndUnloadAsync();
            const uri = recording.getURI(); // 获取录音文件URI
            setRecordedURI(uri);
            setFileUrl(uri)
            ossRefetch()
            Alert.alert("录音已保存", uri);

            // 这里可以添加文件上传逻辑
            // await FileSystem.uploadAsync(...)
        } catch (err) {
            Alert.alert("录音保存失败");
        } finally {
            setRecording(null);
            setIsRecording(false);
        }
    }

    return (
        <PageScrollView
            isTransparentTab
            bodyStyle={{paddingBottom: 0, paddingHorizontal: 0}}
            pageTab={
                <PageTabBar
                    style={{marginVertical: 10}}
                    content={
                        <View style={styles.logo_wrap}>
                            <Image style={styles.logo} resizeMode={'contain'}
                                   source={require('@/assets/images/logo1.png')}></Image>
                            <View>
                                <Text style={styles.app_name}>智灵星</Text>
                                <Text style={styles.app_desc}>生成式AI，激发无限创造力！</Text>
                            </View>
                        </View>
                    }
                    right={
                        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}
                                          onPress={() => setIsVisible(true)}>
                            <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 16,
                                color: 'rgba(0,0,0,0.5)'
                            }}>&#xe64c;</Text>
                            <Text style={{fontSize: 12, color: 'rgba(0, 0, 0, 0.5)', marginLeft: 2}}>最近问答</Text>
                        </TouchableOpacity>
                    }
                />
            }
            pageBottom={
                <View style={styles.page_bottom}>
                    <>
                        {imgUrl &&
                            <View style={styles.img_wrap}>
                                <View style={styles.img_item}>
                                    <TouchableOpacity style={styles.tool_item_icon_box} onPress={() => setImgUrl('')}>
                                        <Text style={styles.tool_item_icons}>&#xe66a;</Text>
                                    </TouchableOpacity>

                                    <TouchableOpacity style={styles.img_item_img}>
                                        <Image style={{width: '100%',height:'100%'}}  resizeMode={'contain'} source={{uri: imgUrl}}/>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        }
                        {/*{ isVoice &&*/}
                        {/*    <View>111</View>*/}
                        {/*}*/}
                    </>

                    <View style={styles.tool_wrap}>
                        { !isVoice &&
                            <TouchableOpacity style={styles.add_wd_wrap} onPress={() => addAnswers()}>
                                <Text style={styles.add_wd_icon}>&#xe628;</Text>
                                <Text style={styles.add_wd_txt}>新建问答</Text>
                            </TouchableOpacity>
                        }

                        <View style={styles.input_wrap}>
                            <FcTextInput multiline text={inputText} placeholder={isVoice?'':'有问题尽管问我...'}
                                         onChangeText={setInputText}
                                         // onSubmitEditing={handleSubmitEditing}
                                         bodyStyle={{backgroundColor: 'white'}}
                                         inputStyle={{paddingRight: 70}}
                                         height={40}
                                         closeIcon={false}
                                         positionEle={
                                             <View style={[{position: 'absolute',top: 0,right: 0,height: '100%'},isVoice && styles.input_btn_wrap]}>
                                                 {/*{isVoice &&*/}
                                                 {/*    <TouchableOpacity*/}
                                                 {/*        style={styles.voice_btn}*/}
                                                 {/*        onPressIn={startRecording}*/}
                                                 {/*        onPressOut={stopRecording}*/}
                                                 {/*        style={{*/}
                                                 {/*            backgroundColor: isRecording ? '#ff4444' : '#2196F3',*/}
                                                 {/*        }}*/}
                                                 {/*    >*/}
                                                 {/*        <View style={{ color: 'white' }}>*/}
                                                 {/*            <Text>{isRecording ? '松开停止' : '长按录音'}</Text>*/}
                                                 {/*        </View>*/}
                                                 {/*    </TouchableOpacity>*/}
                                                 {/*}*/}
                                                 <View style={styles.more_btn}>
                                                     <>
                                                         {(inputText || imgUrl) &&
                                                             <TouchableOpacity onPress={() => takeSend()}>
                                                                 <Image style={{width: 24,height:24}} resizeMode={'contain'}
                                                                        source={require('@/assets/images/public/send_icon.png')}></Image>
                                                             </TouchableOpacity>
                                                         }
                                                     </>
                                                     <>
                                                         {isRequired &&
                                                             <TouchableOpacity onPress={() => stopSend()}>
                                                                 <Image style={{width: 24,height:24}} resizeMode={'contain'}
                                                                        source={require('@/assets/images/public/stop_send_icon.png')}></Image>
                                                             </TouchableOpacity>
                                                         }
                                                     </>
                                                     {
                                                         !(inputText || imgUrl) && !isRequired &&
                                                         <>
                                                             {isVoice &&
                                                                 <TouchableOpacity style={{marginRight: 12}} onPress={() => setIsVoice(false)}>
                                                                     <Text style={styles.add_wd_icon}>&#xe613;</Text>
                                                                 </TouchableOpacity>
                                                             }
                                                             {!isVoice &&
                                                                 <TouchableOpacity style={{marginRight: 12}} onPress={() => setIsVoice(true)}>
                                                                     <Text style={styles.add_wd_icon}>&#xe65b;</Text>
                                                                 </TouchableOpacity>
                                                             }
                                                             {isOpenTools &&
                                                                 <TouchableOpacity onPress={() => setIsOpenTools(false)}>
                                                                     <Text style={styles.add_wd_icon}>&#xe667;</Text>
                                                                 </TouchableOpacity>
                                                             }
                                                             {!isOpenTools &&
                                                                 <TouchableOpacity onPress={() => setIsOpenTools(true)}>
                                                                     <Text style={styles.add_wd_icon}>&#xe62e;</Text>
                                                                 </TouchableOpacity>
                                                             }
                                                         </>
                                                     }

                                                 </View>
                                             </View>
                                         }
                            />
                        </View>
                    </View>
                    {isOpenTools &&
                        <View style={styles.tool_item_wrap}>
                            <TouchableOpacity style={styles.tool_item} onPress={()=>uploadFile()}>
                                <Text style={styles.tool_item_icon}>&#xe62e;</Text>
                                <Text style={styles.tool_item_txt}>上传图片</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.tool_item} onPress={() => {
                                setIsUrl(true)
                                setInputUrl(imgUrl)
                            }}>
                                <Text style={styles.tool_item_icon}>&#xe651;</Text>
                                <Text style={styles.tool_item_txt}>图片链接</Text>
                            </TouchableOpacity>
                        </View>
                    }
                </View>
            }
            pageModal={
                <>
                    {isVisible &&
                        <View style={[styles.modal_wrap]}>
                            <AnswersHistory style onClose={() => setIsVisible(false)} onSelectItem={(val) =>handleSelectItem(val)}/>
                        </View>
                    }
                </>
            }
        >
            <View style={styles.container}>
                {list.map((item, index) =>
                    <View key={index} >
                        {(index ===0 || index > 0 && isMoreThanTwoMinutes(item.timestamp,list[index-1].timestamp,1)) && <Text style={styles.time}>{formatTimestamp(item.timestamp)}</Text>}

                        {
                            item.role == 'USER' && item.imgUrl.length > 0 &&
                            <Text style={styles.right_bubble}>
                                <LinearGradient
                                    colors={['rgba(40, 86, 255, 0.15)', 'rgba(190, 70, 255, 0.15)']}
                                    start={{x: 0, y: 0}}
                                    end={{x: 1, y: 1}}
                                    style={styles.gradient}
                                >
                                    <TouchableOpacity  onPress={() => showImg(item)}>
                                        <Image style={[styles.right_bubble_img,{width: item.imgWidthShow,height: item.imgHeightShow}]} resizeMode={'contain'} source={{uri: item.imgLink}}/>
                                    </TouchableOpacity>
                                </LinearGradient>
                            </Text>
                        }

                        {
                            item.content &&
                            <Text style={[item.role == 'USER' ? styles.right_bubble : styles.left_bubble]}>
                                {item.role == 'USER' &&
                                    <LinearGradient
                                        colors={['rgba(40, 86, 255, 0.15)', 'rgba(190, 70, 255, 0.15)']}
                                        start={{x: 0, y: 0}}
                                        end={{x: 1, y: 1}}
                                        style={styles.gradient}
                                    >
                                        <Text
                                            style={[styles.right_bubble_txt,{fontSize: 15}]}>{item.content}</Text>
                                    </LinearGradient>
                                }
                                {item.role == 'ASSISTANT' &&
                                    <View style={styles.left_bubble_content}>
                                        <Text style={{fontSize: 15}}>{item.content}</Text>
                                        <View style={styles.btn_wrap}>
                                            <TouchableOpacity style={styles.btn} onPress={() => handleCopyToClipboardComponent(item.content)}>
                                                <Text style={styles.copy_icon}>&#xe65e;</Text>
                                                <Text style={{fontSize: 12}}>复制</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                }
                            </Text>
                        }

                        {index === list.length - 1 && item.advices &&
                            <View style={styles.btn_box}>
                                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                    {item?.advices.map((i,idx) =>
                                        <TouchableOpacity onPress={() => selectKeywork(i)} style={styles.btn_box_item} key={idx}><Text>{i}</Text></TouchableOpacity>
                                    )}
                                </ScrollView>
                            </View>
                        }
                    </View>

                )}
            </View>

            <FcModal
                isOpen={isUrl}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsUrl(false)}
                style={styles.modal_default}
                titleText={'图片链接'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => {
                            setIsUrl(false)
                            setInputUrl('')
                        },
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => takeSure(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput multiline text={inputUrl} placeholder={'请输入图片地址链接'}
                                 onChangeText={setInputUrl}
                                 height={82}/>
                </View>
            </FcModal>

            <Modal
                visible={isShowImg}
                transparent={true}
                onRequestClose={() => setIsShowImg(false)}
            >
                <ImageViewer
                    imageUrls={imgList}
                    index={imgIndex}
                    onSwipeDown={() => {
                        console.log('onSwipeDown');
                    }}
                    // onMove={data => console.log(data)}
                    enableSwipeDown={true}
                    onClick={() => setIsShowImg(false)}
                />
            </Modal>
        </PageScrollView>
    )
}

export default index

const styles = StyleSheet.create({
    container: {
        padding: 16
    },
    logo_wrap: {
        flexDirection: "row",
        alignItems: "center",
        width: '78%'
    },
    logo: {
        width: 32,
        height: 32,
        marginRight: 8
    },
    app_name: {
        fontSize: 12,
        lineHeight: 18,
        color: 'rgba(0, 0, 0, 0.9)',
    },
    app_desc: {
        fontSize: 10,
        lineHeight: 14,
        color: 'rgba(0, 0, 0, 0.5)',
    },
    page_bottom: {
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(0, 0, 0, 0.1)',
    },
    tool_wrap: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    tool_item_wrap: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginHorizontal: 10,
    },
    tool_item: {
        width: 64,
        height: 64,
        borderRadius: 8,
        backgroundColor: 'white',
        marginVertical: 4,
        marginHorizontal: 6,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
    },
    tool_item_icon:{
        fontFamily: 'FcIconFont',
        fontSize: 24,
        color: 'rgba(0,0,0,0.9)'
    },
    tool_item_txt:{
        fontSize: 12,
        color: 'rgba(0,0,0,0.9)',
        lineHeight: 18,
        marginTop: 8
    },
    img_wrap: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginHorizontal: 10,
    },
    img_item: {
        width: 48,
        height: 48,
        borderRadius: 8,
        backgroundColor: 'white',
        marginVertical: 4,
        marginHorizontal: 6,
        position: 'relative',
    },
    img_item_img: {
        width: '100%',
        height: '100%',
    },
    tool_item_icon_box: {
        position: 'absolute',
        right: -8,
        top: -8,
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: 'rgba(0,0,0,0.7)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 100
    },
    tool_item_icons: {
        fontFamily: 'FcIconFont',
        fontSize: 12,
        color: 'white',
    },
    add_wd_wrap: {
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
        marginRight: 8,
    },
    add_wd_txt: {
        fontSize: 10,
        color: 'rgba(0,0,0,0.5)',
        lineHeight: 14
    },
    add_wd_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 24,
        color: 'rgba(0,0,0,0.9)'
    },
    input_wrap: {
        flex: 1
    },
    more_btn: {
        position: "absolute",
        right: 10,
        top: 0,
        height: '100%',
        flexDirection: 'row',
        alignItems: "center",
    },
    time: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.3)',
        lineHeight: 18,
        textAlign: "center",
        marginBottom: 16
    },
    left_bubble: {
        display: 'flex',
        // justifyContent: "flex-end",
        maxWidth: '100%',
        marginBottom: 16,
    },
    left_bubble_content: {
        backgroundColor: 'white',
        borderTopRightRadius: 12,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
        paddingHorizontal: 12,
        paddingVertical: 11,
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)',
        lineHeight: 26,
        maxWidth: '100%'
    },

    btn_wrap: {
        paddingTop: 7.5,
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(0, 0, 0, 0.1)',
        marginTop: 11
    },
    btn:{
        fontSize: 10,
        flexDirection: "row",
        alignItems: "center"
    },
    copy_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 16,
        color: 'rgba(0,0,0,0.9)'
    },
    right_bubble: {
        display: 'flex',
        justifyContent: "flex-end",
        textAlign: 'right',
        maxWidth: '100%',
        marginBottom: 16,
    },
    right_bubble_txt: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)',
        lineHeight: 26,
        // width: '100%'
    },
    right_bubble_img: {
        width: 100,
        height: 100,
        borderRadius: 8
    },
    gradient: {
        borderTopLeftRadius: 12,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
        paddingHorizontal: 12,
        paddingVertical: 11,
        maxWidth: '100%',
        // float: 'right'
    },
    btn_box: {
        marginBottom: 16,
        marginLeft: -4
    },
    btn_box_item: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.9)',
        lineHeight: 18,
        paddingHorizontal: 8,
        paddingVertical: 5,
        backgroundColor: 'white',
        borderRadius: 20,
        marginHorizontal: 4
    },
    modal_wrap: {
        width: '100%',
        height: '100%',
        position: "absolute",
        left: 0,
        bottom: 0,
        zIndex: 100
    },
    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
    },
    input_btn_wrap: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
    },
    voice_btn: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    }
})